<template>
  
    <router-view></router-view>
  
    <div class="loginContainer">
      <el-form id="loginForm" @submit.native.prevent="handleSubmit">
        <h2>登录</h2>
        <el-form-item id=input>
          <el-input v-model = 'user.account' type="account" placeholder ='请输入账号'/>
        <!-- </el-form-item>
        <el-form-item > -->
          <el-input v-model = 'user.password' type="password" placeholder = '请输入密码'/>
        </el-form-item>
        <el-form-item >
          <el-checkbox id="remember" value = '记住密码' v-model = 'user.isRemember'>记住密码</el-checkbox>
          忘记密码？
        </el-form-item>
        <el-form-item>
          <el-button type="primary" native-type="submit" @click ="login">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </template>
  
  <script setup>
    import { ref } from 'vue';
    // import router from '../router';
    import { useRouter } from 'vue-router';
    const user = ref({
        account: '',
        password: '',
        isRemember: false,
    })
    const router = useRouter()
    const login = () =>{
      if(user.value.account == 'user' && user.value.password == '123'){
        router.push({path:'app/Model_Training/general'})
      }else if(user.value.account == '' || user.value.password == ''){
        alert("账号或者密码为空!");
      }else {
        alert("账号或者密码错误!");
      }
       
    }
    const handleSubmit = (event) => {
      event.preventDefault(); // 阻止表单的默认提交行为
      login();
    };
  </script>
  
  <style lang="scss" scoped>
    .loginContainer {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background-color: #f5f5f5;
    }    
    .el-form{
      display: flex;
      flex-direction: column;
      align-items: center;
      box-sizing: border-box;
      width: 400px;
      padding: 30px;
      border-radius: 5px;
      background-color: #fff;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    .el-input{
      width: 100%;
      margin-bottom: 10px;
    }
    .el-button{
      width: 100px;
    }
  </style>